<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>步数管理</title>

<%@ include file="../common.jsp"%>
<script type="text/javascript" src="${path }/static/vender/jquery/jquery.pagination.js"></script>
<script type="text/javascript" src="${path }/static/vender/My97DatePicker/WdatePicker.js"></script>


<style type="text/css">
.list_box {
	/* position: relative; */
	position: fixed;
	width: 567px;
	background: #f3f3f3;
	border: 1px solid #CCC;
}
.keywords_list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.panel-body table td {
	border-top: 0px solid #ddd !important
}
</style>
</head>

<body>
	<%@ include file="../header.jsp"%>

	<div class="container-fluid main">

		<div class="panel panel-default">
			<div class="panel-heading">
				<h3 class="panel-title">查询</h3>
			</div>
			<div class="panel-body">
				<form id="queryForm" action="${path }/step/list" method="post">
				<table class="table">
		            <thead>
		              <tr>
		              </tr>
		            </thead>
		            <tbody>
		              <tr>
		                <td class="pull-right">开始时间</td>
		                <td>
		                	<input name="startTime" type="text" class="form-control" value="${map.startTime }" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" check-type="required" required-message="请选择案发时间" readonly />
                 			</td>
		                <td class="pull-right">结束时间</td>
		                <td>
		                	<input name="endTime" type="text" class="form-control" value="${map.endTime }" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" check-type="required" required-message="请选择案发时间" readonly />
                 			</td>
		              </tr>
		              <tr>
		                <td class="pull-right">姓名</td>
		                <td><input type="text" class="form-control" name="realyName" value="${map.realyName }" placeholder="输入姓名"></td>
		                <td class="pull-right">所属分组</td>
		                <td>
		                	<select name="groupId" class="form-control" check-type="required" required-message="">
		                      	<option value="">全部 </option>
		                      	<c:forEach var="group" items="${groups }">
			                      	<option value="${group.id }"  <c:if test="${map.groupId == group.id }"> selected </c:if> >${group.groupName }</option>
		                      	</c:forEach> 
		                    </select>
		                </td>
		              </tr>
		              <tr>
		                <td colspan="4">
			                <div class="pull-right">
			                	<label>
								  	排序 : 
								</label>
			                	<label class="checkbox-inline">
								  <input type="checkbox" name="orderby_date" <c:if test="${map.orderby_date == \"1\" }"> checked </c:if> value="1"> 时间
								</label>
								<label class="checkbox-inline">
								  <input type="checkbox" name="orderby_stepcount" <c:if test="${map.orderby_stepcount == \"2\" }"> checked </c:if> value="2"> 步数
								</label>
								<label class="checkbox-inline">
								  <input type="checkbox" name="orderby_group" <c:if test="${map.orderby_group == \"3\" }"> checked </c:if> value="3"> 分组
								</label>
								<label> | </label>
								<label class="radio-inline">
								  <input type="radio" name="sort" <c:if test="${map.sort != \"1\" }"> checked </c:if> value="0"> 升序
								</label>
								<label class="radio-inline">
								  <input type="radio" name="sort" <c:if test="${map.sort == \"1\" }"> checked </c:if> value="1"> 降序
								</label>
			                	<button type="submit" class="btn btn-info">&nbsp;查&nbsp;&nbsp;&nbsp;询&nbsp;</button>
			                	<button type="button" id="addStepBtn" class="btn btn-info">&nbsp;添加步数&nbsp;</button>
			                </div>
		                </td>
		              </tr>
		            </tbody>
		          </table>
				</form>
			</div>
		</div>
		<div class="table-responsive">
			<div class="form-group">
                <div id="msgDiv" class="alert alert-warning" <c:if test="${msg == null }"> style="display:none" </c:if> role="alert">${msg }</div>
              </div>
			<table class="table table-striped">
				<thead>
					<tr>
						<th>#</th>
						<th>时间</th>
						<th>姓名</th>
						<th>性别</th>
						<th>步数</th>
						<th>所属分组</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<c:forEach var="step" items="${steps }" varStatus="idx">
						<tr>
							<td>${idx.index+1 }</td>
							<td><fmt:formatDate value="${step.stepDate }" pattern="yyyy-MM-dd" /></td>
							<td>${step.walker.realyName }</td>
							<td><c:if test="${step.walker.sex == \"0\" }">男</c:if> <c:if test="${step.walker.sex == \"1\" }">女</c:if></td>
							<td>${step.stepCount }</td>
							<td>${step.walkerGroup.groupName }</td>
							<td>
								<a id="delStep" data="${step.id }" class="btn btn-primary">删除</a> 
							</td>
						</tr>
					</c:forEach>
				</tbody>
			</table>
		</div>
	</div>

	<!-- 添加步数面板 -->	
	<div id="addPanel" class="modal fade">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
	        <span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title">添加步数</h4>
	      </div>
	      <div class="modal-body">
	        <form id="addStepForm">
              <div class="form-group">
                <label for="message-text" class="control-label">所属分组:</label>
                <select id="addPanelGroupId" check-type="required" required-message="请选择" class="form-control">
                 </select>
              </div>
              <div class="form-group">
                <label for="recipient-name" class="control-label">时间:</label>
                <input id="addPanelStepDate" type="text" class="form-control" check-type="required" required-message="请选择时间" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" readonly />
              </div>
              <div class="form-group">
                <label for="recipient-name" class="control-label">姓名:</label>
                <input type="text" class="form-control" id="addPanelRealyName" check-type="required chinese" required-message="姓名不能为空">
                <div class="list_box">
					<div class="keywords_list">
					</div>
				</div>
              </div>
              <div class="form-group">
                <label for="recipient-name" class="control-label">步数:</label>
                <input type="number" class="form-control" id="addPanelStepCount"  check-type="required number" range="1~100000" required-message="步数不能为空">
              </div>
              <div class="form-group">
                <div id="addMsgDiv" role="alert">
	                <!-- <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> -->
	                
                </div>
              </div>
            </form>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	        <button id="saveRectBtn" type="button" class="btn btn-primary">保存</button>
	      </div>
	    </div><!-- /.modal-content -->
	  </div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
	
	<jsp:include page="${pagePath }/paginator.jsp">
		<jsp:param name="form" value="#queryForm" />
	</jsp:include>

	<jsp:include page="${pagePath }/footer.jsp"></jsp:include>
	
	<script type="text/javascript">
		$(function(){
			// 添加步数时间默认为昨天
			var defaultDate = new Date(new Date()-(24*60*60*1000));
			$("#addPanelStepDate").val(defaultDate.format("yyyy-MM-dd"));
			
			// 表单验证
			$("#addStepForm").validation({reqmark:false,icon:false,validFocusout:false});
			
			// 点击添加步数按钮弹出添加面板
			$("#addStepBtn").click(function(){
				$("#addPanel").modal({backdrop: 'static', keyboard: false});
			});
			
			// 保存添加步数数据
			$("#saveRectBtn").click(function(){
				if($("#addStepForm").valid()==false)
					return false;
				$.post("${path }/step/doSave" , {
					groupId : $("#addPanelGroupId").val(),
					realyName : $("#addPanelRealyName").val(),
					stepCount : $("#addPanelStepCount").val(),
					stepDate : $("#addPanelStepDate").val()  
				}, function(data,status){
					$("#addMsgDiv").show().html(data.msg);
					if(data && data.status==true) {
						$("#addMsgDiv").attr("class", "alert alert-success");
						$("#addPanelStepCount").val('');
					}else{
						$("#addMsgDiv").attr("class", "alert alert-warning");
					}
				});
			});
			
			$("#delStep").click(function(){
				if(!confirm("确定要删除该记录吗?"))
					return ;
				$.post("${path }/step/doDelById " , {
					stepId : $("#delStep").attr("data")  
				}, function(data,status){
					$("#addMsgDiv").show().html(data.msg);
					if(data && data.status==true) {
						location.reload();
					}else{
						$("#msgDiv").attr("class", "alert alert-warning");
					}
				});
			});
			
			// 添加步数中的姓名鼠标点击智能提示功能
			$("#addPanelRealyName").click(function(){
				$("#addPanel").modal({backdrop: 'static', keyboard: false});
			});
			$("#addPanelGroupId").change(function(){
				if(!$("#addPanelGroupId").val()){
					return ;
				}
				$(".keywords_list").children().remove();
				$.post("${path }/walker/getWalkersByGroupId" , {
					groupId : $("#addPanelGroupId").val()
				}, function(data,status){
					for(var i in data){
						var $btn = $('<button type="button" data="'+data[i].realyName+'" class="btn btn-info">'+data[i].realyName+'</button>');
						$btn.click(function(){
							$("#addPanelRealyName").val($(this).text()).data("data", data[i]);
							$('#addPanelRealyName').focus();
						});
						$(".keywords_list").append($btn);
					}
					
				});
			});
			
			// 添加步数面板显示后出发事件
			$('#addPanel').on('shown.bs.modal', function (e) {
				if($("#addPanelGroupId option").length > 0){
					return ;
				}
				$.post("${path }/walker/getOwnGroup" , { }, function(data,status){
					for(var i in data){
						var group = data[i];
						var $opt = '<option value="'+group.id+'"  >'+group.groupName+'</option>';
						$("#addPanelGroupId").append($opt);
					}
					if(data && data[0]) {
						$("#addPanelGroupId").val(data[0].id).trigger("change")
					} else {
						$("#addMsgDiv").attr("class", "alert alert-warning").show().html("您没有权限添加步数！");
						$("#saveRectBtn").attr("disabled", "disabled");
					}
				});
			});
			
			$('.list_box').hide();
			
			$('#addPanelRealyName').focusin(function(){
				$('.list_box').show();
				// $("#addPanelRealyName").after($(".list_box"));
				window.__foced=true;
			});
			$('#addPanelRealyName').keyup(function(e){
				var keywords = $('#addPanelRealyName').val();
				if(keywords.trim().length == 0){
					$(".keywords_list ").children().show();
					return ;
				}
				$(".keywords_list ").children().hide();
				$(".list_box").find("button[data='"+keywords+"']").show();
			});
			$('#addPanelRealyName').focusout(function(){
				window.__foced=false;
				setTimeout(function(){
					if(!window.__foced)
						$('.list_box').hide();
				}, 300);
			});
			
		});
	</script>
</body>
</html>